<template>
  <div>
    <div>
      <div style="position: relative;">
        <!-- 搜索框 -->
        <!-- <el-amap-search-box
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        /> -->

        <div class="search">
          <el-form label-position="right" :inline="true" label-width="80px" :model="form">
            <el-form-item label="震中地名">
              <!-- <el-input style="border-radius:0px;" v-model="form.name" ></el-input> -->
              <!-- <el-cascader :disabled="title == '详情' || title == '推送'" @change="handleAddress" filterable
                style="width: 100%;" v-model="form.addressList" :options="citylist" :props="{
                  expandTrigger: 'click',
                  label: 'name',
                  value: 'code',
                  children: 'child',
                }"></el-cascader> -->
              <el-input :disabled="title == '详情' || title == '推送'" v-model="form.name">
              </el-input>
            </el-form-item>
            <el-form-item label="经度">
              <el-input :disabled="title == '详情' || title == '推送'" style="width:100px;border-radius:0px;"
                @input="inputFun('longitude', $event)" @blur="handlePosition(false)" v-model="form.longitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input :disabled="title == '详情' || title == '推送'" style="width:100px;border-radius:0px;"
                @input="inputFun('latitude', $event)" @blur="handlePosition(false)" v-model="form.latitude"></el-input>
            </el-form-item>
            <!-- <el-form-item>
              <div class="position" @click="getLngLatLocation">
              </div>
            </el-form-item> -->
          </el-form>
          <!-- <div class="position" @click="getLngLatLocation">
          </div> -->
        </div>
        <!-- 地图 -->
        <el-amap class="amap-box" :doubleClickZoom="false" :zoom="amap.zoom" :center="amap.center" :plugin="amap.plugin"
          :events="amap.events">
          <!-- 当前位置图标 :icon="iconImg" -->
          <el-amap-marker vid="markerIndex_1" :clickable="false" v-for="(marker, index) in amap.markers"
            :key="'marker' + index" :position="marker.position" :events="markerEvents" :extData="marker"
            :title="marker.text">
            <div :class="['logMarker']">
              <div :style="`background-color: #f5222d;`" :class="['coordSvg']">
                <!-- <span v-if="levelType">{{item.epiintensity | lv}}</span>
                <span v-else style="font-size: 12px">{{item.magnitude}}</span> -->
              </div>
              <!-- <div :style="'border: 1px solid #f5222d;background: #f5222d52;'" class="dot"></div>
              <div :style="'border: 1px solid #f5222d;background: #f5222d52;'" class="dot1"></div>
              <div :style="'border: 1px solid #f5222d;background: #f5222d52;'" class="dot2"></div> -->
              <div class="animationBox">
                <span style="--i:0"></span>
                <span style="--i:0.5"></span>
                <span style="--i:1"></span>
                <span style="--i:1.5"></span>
                <span style="--i:2"></span>
              </div>
            </div>
          </el-amap-marker>
          <!-- 位置名称显示 -->
          <el-amap-text v-for="(marker, index) in amap.markers" :key="'text' + index" :text="marker.text"
            :offset="marker.offset" :position="marker.position" />
          <!-- 设备点位 -->
          <el-amap-marker vid="markerIndex_2" :visible="visible" :clickable="true" style="pointer-events: auto;"
            v-for="(item, index) in device" :key="index" :position="[item.longitude, item.latitude]"
            :events="deviceEvents" :title="item.projectName">
            <div :data-name="item.deviceId">
              <div
                :style="`background-color: ${colorFun(item)};opacity: ${deviceClick ? deviceClick == item.deviceId ? '1' : '0.7' : '1'};`"
                :class="['coordSvg']">
              </div>
            </div>
          </el-amap-marker>
        </el-amap>
      </div>
    </div>
  </div>
</template>
<script>
import { getLnglat, getCity, getAddress } from '@/api/rehearsal/index.js';
export default {
  name: 'Map',
  props: {
    device: {
      type: Array,
      default: () => {
        return [];
      },
    },
    topForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: '新增',
    },
    oneGrad: {
      type: Number,
      default: 3,
    },
    twoGrad: {
      type: Number,
      default: 4,
    },
    threeGrad: {
      type: Number,
      default: 6,
    },
    fourGrad: {
      type: Number,
      default: 8,
    },
  },
  data() {
    const vm = this;
    return {
      visible: true,
      citylist: [],
      deviceClick: null,
      deviceDetails: {},
      form: {
        name: null,
        // addressList: [],
        // address: '',
        longitude: null,
        latitude: null,
        // addressName: '',
      },
      iconImg:
        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
      // form对象
      dataForm: {
        lat: '39.98294', // 纬度
        lon: '116.319802', // 经度
        // orgAddr: '',
        // province: '',
        // city: '',
        // district: '',
        name: ''
      },
      // 地图搜索对象
      searchOption: {
        city: '全国',
        citylimit: true,
      },
      lng: 0,
      lat: 0,
      markerEvents: {
        click(e) {
          console.log(e.target.w.extData);
          vm.markerClick(e.target.w.extData);
        },
      },
      deviceEvents: {
        click(e) {
          if (vm.amap.markers.length > 0) {
            let key = e.originEvent.target.getAttribute('data-name');
            const data = vm.device.filter((item) => {
              return item.deviceId == key;
            });
            vm.deviceClick = key;
            vm.deviceDetails = data[0];
          } else {
            vm.$modal.msgError('请选择发震地点!');
          }
        },
      },
      event_text: {
        init(o) {
          let txt = o.w.text,
            txtcolor = '';
          if (txt == '红色预警') {
            txtcolor = '#f5222d';
          } else if (txt == '橙色预警') {
            txtcolor = '#faad14';
          } else if (txt == '黄色预警') {
            txtcolor = '#fadb14';
          } else if (txt == '蓝色预警') {
            txtcolor = '#1890ff';
          } else if (txt == '无预警') {
            txtcolor = '#808080';
          }
          o.setStyle({
            backgroundColor: txtcolor,
            color: '#ffffff',
            fontSize: '12px',
          });
        },
      },
      // 地图对象
      amap: {
        zoom: 4,
        center: [116.319802, 39.98294],
        events: {
          init: async (map) => {
            map.setMapStyle("amap://styles/b939a90d808e524ec33815f8ab556c72");
            // this.Map = map;
            // console.log(map);
            // console.log(map.getCenter());

            // this.$store.dispatch('app/setCity', map.getAdcode());
          },
          // 点击获取地址的数据
          dblclick(e) {
            if (vm.title == '详情' || vm.title == '推送') return;
            console.log(e);
            vm.amap.markers = [];
            // vm.visible = false
            const { lng, lat } = e.lnglat;
            vm.dataForm.lon = lng;
            vm.dataForm.lat = lat;
            vm.form.longitude = lng.toFixed(3);
            vm.form.latitude = lat.toFixed(3);
            vm.getAddress(lng, lat)
            const obj = {
              position: [lng, lat],
              text: vm.form.name,
              offset: [0, 30],
            };
            vm.amap.markers.push(obj);
            // vm.visible = true
            return
            // 这里通过高德 SDK 完成。
            var geocoder = new AMap.Geocoder({
              radius: 100,
              extensions: 'all',
            });
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                console.log(status, result);
                if (result && result.regeocode) {
                  console.log('点击获取地址的数据', result);
                  vm.dataForm.orgAddr = result.regeocode.formattedAddress;
                  vm.dataForm.province =
                    result.regeocode.addressComponent.province;
                  vm.dataForm.city = result.regeocode.addressComponent.city;
                  vm.dataForm.district =
                    result.regeocode.addressComponent.district;
                  vm.dataForm.adcode = result.regeocode.addressComponent.adcode;
                  vm.dataForm.lat = lat ? lat.toString() : '';
                  vm.dataForm.lon = lng ? lng.toString() : '';


                  // vm.form.device = vm.device
                  let addressCode = [];
                  let addressName = [];
                  vm.citylist.forEach((item1) => {
                    if (
                      item1.code.slice(0, 2) ==
                      result.regeocode.addressComponent.adcode.slice(0, 2)
                    ) {
                      addressCode.push(item1.code);
                      addressName.push(item1.name);
                      item1.child.forEach((item2) => {
                        if (
                          item2.code.slice(2, 4) ==
                          result.regeocode.addressComponent.adcode.slice(2, 4)
                        ) {
                          if (item2.child) {
                            addressCode.push(item2.code);
                            addressName.push(item2.name)
                            item2.child.forEach((item3) => {
                              if (
                                item3.code.slice(4, 6) ==
                                result.regeocode.addressComponent.adcode.slice(
                                  4,
                                  6
                                )
                              ) {
                                addressCode.push(item3.code);
                                addressName.push(item3.name)
                              }
                            });
                          } else {
                            if (item2.code.slice(4, 6) == result.regeocode.addressComponent.adcode.slice(4, 6)) {
                              addressCode.push(item2.code);
                              addressName.push(item2.name)
                            }
                          }
                        }
                      });
                    }
                  });
                  vm.form.addressList = addressCode;
                  vm.form.address = result.regeocode.formattedAddress;
                  vm.form.addressName = addressName.join('');
                  // vm.$set(vm.form, 'addressList')

                }
              }
            });
            vm.$nextTick();
          },
          click(e) {
            vm.deviceDetails = {};
            vm.deviceClick = null;
          },
        },
        // plugin: [
        //   {
        //     // 定位
        //     pName: "Geolocation",
        //     events: {
        //       init(o) {
        //         // o是高德地图定位插件实例
        //         o.getCurrentPosition((status, result) => {
        //           console.log("定位：", result);
        //           if (result && result.position) {
        //             // 设置经度
        //             vm.lng = result.position.lng;
        //             // 设置维度
        //             vm.lat = result.position.lat;
        //             // 设置坐标
        //             vm.amap.center = [vm.lng, vm.lat];
        //             let op = {
        //               position: [vm.lng, vm.lat],
        //               text: result.formattedAddress,
        //               offset: [0, 30],
        //             };
        //             vm.amap.markers.push(op);
        //             // 页面渲染好后
        //             vm.$nextTick();
        //           }
        //         });
        //       },
        //     },
        //   },
        // ],
        //
        markers: [
          // {
          //   position: vm.amap.center,
          //   // text: result.formattedAddress,
          //   offset: [0, 30],
          // },
        ],
      },
    };
  },
  filters: {
    lv(value) {
      let lv = '无预警';
      if (value < this.oneGrad) {
        lv = '无预警';
      } else if (value >= this.oneGrad && value < this.twoGrad) {
        lv = '蓝色预警';
      } else if (value >= this.twoGrad && value < this.threeGrad) {
        lv = '黄色预警';
      } else if (value >= this.threeGrad && value < this.fourGrad) {
        lv = '橙色预警';
      } else if (value >= this.fourGrad) {
        lv = '红色预警';
      }
      return lv;
    },
  },
  created() {
    this.queryCity();
  },
  methods: {
    colorFun(item) {
      let level = Math.round(item.level)
      if (level) {
        if (level <= this.oneGrad) {
          return '#808080';
        } else if (level <= this.twoGrad && level > this.oneGrad) {
          return '#1890ff';
        } else if (level > this.twoGrad && level <= this.threeGrad) {
          return '#fadb14';
        } else if (level > this.threeGrad && level <= this.fourGrad) {
          return '#faad14';
        } else if (level > this.fourGrad) {
          return '#f5222d';
        }
      } else {
        return '#808080';
      }
    },
    inputFun(name, e) {
      console.log(e, 'null')
      // if (!/^(\-|\+)?\d+(\.\d+)?$/.test(e)) {
      //   this.form[name] = e.split(0, e.length - 1);
      // } else 
      if (name == 'longitude') {
        if (this.form[name] > 180) {
          this.form[name] = 180;
        } else if (this.form[name] < -180) {
          this.form[name] = -180;
        }
      } else if (name == 'latitude') {
        if (this.form[name] > 90) {
          this.form[name] = 90;
        } else if (this.form[name] < -90) {
          this.form[name] = -90;
        }
      }
    },
    async handlePosition(type = false) {
      if (type) {
        // const res = JSON.parse(this.topForm.address).join(',').split(',');
        this.form.longitude = this.topForm.epilon;
        this.form.latitude = this.topForm.epilat;
        this.form.name = this.topForm.locname;
        // this.$set(this.form, 'addressList', res)
        // this.$set(this.form, 'addressList', res);
        this.form.addressName = this.topForm.addressName;
      }
      if (!(this.form.longitude && this.form.latitude)) return;
      // debugger
      const vm = this;
      this.markerClick(
        {
          position: [this.form.longitude, this.form.latitude],
        },
        (value) => {
          // vm.compiles(value);
          vm.mapDraw(
            [vm.form.longitude, vm.form.latitude],
            vm.form.name || ''
          );
        }
      );
    },
    // 省市区联动变化后
    handleAddress(val) {
      console.log(val);
      const vm = this;
      if (val.length > 0) {
        this.form.address = '';
        let addressName = [];
        this.citylist.forEach((item1) => {
          if (item1.code == val[0]) {
            addressName.push(item1.name);
            item1.child.forEach((item2) => {
              if (item2.code == val[1]) {
                addressName.push(item2.name);
                item2.child.forEach((item3) => {
                  if (item3.code == val[2]) {
                    addressName.push(item3.name);
                  }
                });
              }
            });
          }
        });
        getLnglat({
          adCode: val[2],
          city: addressName[1],
          area: addressName[2],
        }).then((response) => {
          if (Object.keys(response.data).length > 0) {
            console.log(response.data.longitude, 'response.data.longitude')
            this.form.longitude = response.data.longitude.toFixed(3);
            this.form.latitude = response.data.latitude.toFixed(3);
            this.markerClick(
              {
                position: [this.form.longitude, this.form.latitude],
              },
              (value) => {
                vm.form.addressName = addressName.join('');
                vm.form.address = value.regeocode.formattedAddress;
                vm.mapDraw(
                  [vm.form.longitude, vm.form.latitude],
                  vm.form.address || ''
                );
              }
            );
            this.sure();
          }
        });
      }
    },
    queryCity() {
      getCity().then((response) => {
        this.citylist = response.data;
      });
    },
    mapDraw(arriveCoor, address) {
      // this.visible = false
      if (arriveCoor.length > 0 && arriveCoor[0] && arriveCoor[1]) {
        this.amap.markers = [];
        this.amap.center = arriveCoor;
        let op = {
          position: arriveCoor,
          text: address,
          offset: [0, 30],
        };
        this.amap.markers.push(op);
        // this.visible = true
        // this.$forceUpdate()
        // this.sure();
      }
    },
    // 地图搜索回调
    onSearchResult(pois) {
      const vm = this;
      vm.amap.markers = [];
      let latSum = 0;
      let lngSum = 0;
      console.log('地图回调', pois);
      if (pois.length > 0) {
        pois.forEach((poi, index) => {
          const { lng, lat } = poi;
          if (index === 0) {
            lngSum = lng;
            latSum = lat;
            const obj = {
              position: [poi.lng, poi.lat],
              text: poi.name,
              offset: [0, 30],
            };
            vm.amap.markers.push(obj);
            console.log('地图搜索回调', poi);
            vm.dataForm.orgAddr = poi.name;
            vm.dataForm.lat = poi.lat ? poi.lat.toString() : '';
            vm.dataForm.lon = poi.lng ? poi.lng.toString() : '';
          }
        });
        vm.amap.center = [lngSum, latSum];
      }
    },
    markerClick(data, cb) {
      let lng,
        lat,
        vm = this;
      this.dataForm.lon = lng = data.position[0];
      this.dataForm.lat = lat = data.position[1];
      this.getAddress(lng, lat)
      cb && cb(vm.form);
      return
      // 这里通过高德 SDK 完成。
      var geocoder = new AMap.Geocoder({
        radius: 100,
        extensions: 'all',
      });

      geocoder.getAddress([lng, lat], function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            console.log('点击获取地址的数据', result);
            vm.dataForm.orgAddr = result.regeocode.formattedAddress;
            vm.dataForm.province = result.regeocode.addressComponent.province;
            vm.dataForm.city = result.regeocode.addressComponent.city;
            vm.dataForm.district = result.regeocode.addressComponent.district;
            vm.dataForm.adcode = result.regeocode.addressComponent.adcode;
            vm.dataForm.lat = lat ? lat.toString() : '';
            vm.dataForm.lon = lng ? lng.toString() : '';

          }
        }
      });
    },
    async getAddress(lon, lat) {
      const res = await getAddress(lon, lat)
      if (res.code == 200) {
        console.log(res, 'lon')
        this.form.name = res.msg
        this.sure();
      }
    },
    // 提交方法
    sure() {
      const vm = this;
      this.$emit('updateLocation', vm.dataForm);
      this.$emit('getForm', vm.form);
    },
    // 根据IP
    getLngLatLocation() {
      if (this.title == '详情' || this.title == '推送') return;
      const _this = this;
      window.AMap.plugin('AMap.CitySearch', function () {
        let citySearch = new window.AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            // console.log('通过ip获取当前城市：', result)
            let lnglat = result.rectangle.split(';')[0].split(',');
            console.log(result, lnglat, 'result')
            _this.form.longitude = Number(lnglat[0]).toFixed(3);
            _this.form.latitude = Number(lnglat[1]).toFixed(3);
            _this.getAddress(lnglat[0], lnglat[1])
            _this.markerClick(
              {
                position: [_this.form.longitude, _this.form.latitude],
              },
              (value) => {
                // _this.compiles(value);
                _this.mapDraw(
                  [_this.form.longitude, _this.form.latitude],
                  _this.form.name || ''
                );
              }
            );
            _this.sure();
            return
            //逆向地理编码
            window.AMap.plugin('AMap. ', function () {
              let geocoder = new window.AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: result.adcode,
              });


              geocoder.getAddress(lnglat, function (status, data) {
                if (status === 'complete' && data.info === 'OK') {
                  // result为对应的地理位置详细信息
                  console.log(data);
                  getLnglat({
                    adCode: data.regeocode.addressComponent.adcode,
                    city: data.regeocode.addressComponent.city,
                    area: data.regeocode.addressComponent.district,
                  }).then((response) => {
                    if (Object.keys(response.data).length > 0) {
                      _this.form.longitude = Number(response.data.longitude).toFixed(3);
                      _this.form.latitude = Number(response.data.latitude).toFixed(3);
                      _this.markerClick(
                        {
                          position: [_this.form.longitude, _this.form.latitude],
                        },
                        (value) => {
                          _this.compiles(value);
                          _this.mapDraw(
                            [_this.form.longitude, _this.form.latitude],
                            _this.form.address || ''
                          );
                        }
                      );
                      _this.sure();
                    }
                  });
                }
              });
            });
          }
        });
      });
    },
    // 省市区
    compiles(value) {
      const res = value;
      let addressCode = [];
      let addressName = [];
      this.citylist.forEach((item1) => {
        if (
          item1.code.slice(0, 2) ==
          res.regeocode.addressComponent.adcode.slice(0, 2)
        ) {
          addressCode.push(item1.code);
          addressName.push(item1.name);
          item1.child.forEach((item2) => {
            if (
              item2.code.slice(2, 4) ==
              res.regeocode.addressComponent.adcode.slice(2, 4)
            ) {
              addressCode.push(item2.code);
              addressName.push(item2.name);
              item2.child.forEach((item3) => {
                if (
                  item3.code.slice(4, 6) ==
                  res.regeocode.addressComponent.adcode.slice(4, 6)
                ) {
                  addressCode.push(item3.code);
                  addressName.push(item3.name);
                }
              });
            }
          });
        }
      });
      console.log(addressName);
      this.form.addressName = addressName.join('');
      this.form.addressList = addressCode;
      this.form.address = res.regeocode.formattedAddress;
    },
  },
};
</script>
<style lang="scss" scoped>
.divicon {
  width: 4px;
  height: 15px;
  background-color: #1890ff;
  position: absolute;
  top: 8px;
  left: -10px;
}

.animationBox {
  position: absolute;
  top: 5px;
  left: -35px;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animationBox span {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #f5222d;
  background: #f5222d52;
  border-radius: 50%;
  animation: animate 5s linear infinite;
  animation-delay: calc(2s * var(--i));
  opacity: 0;
}

@keyframes animate {
  0% {
    transform: scale(0.1);
    opacity: 0.5;
  }

  50% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes warn1 {
  0% {
    transform: translateX(-19%) scale(0.3);
  }

  10% {
    transform: translateX(-19%) scale(0.39);
  }

  20% {
    transform: translateX(-19%) scale(0.48);
  }

  30% {
    transform: translateX(-19%) scale(0.57);
  }

  40% {
    transform: translateX(-19%) scale(0.66);
  }

  50% {
    transform: translateX(-19%) scale(0.75);
  }

  60% {
    transform: translateX(-19%) scale(0.84);
  }

  70% {
    transform: translateX(-19%) scale(0.93);
  }

  80% {
    transform: translateX(-19%) scale(1.02);
  }

  90% {
    transform: translateX(-19%) scale(1.11);
  }

  100% {
    transform: translateX(-19%) scale(1.2);
  }
}

@keyframes warn2 {
  0% {
    transform: translateX(-19%) scale(0.4);
  }

  10% {
    transform: translateX(-19%) scale(0.51);
  }

  20% {
    transform: translateX(-19%) scale(0.62);
  }

  30% {
    transform: translateX(-19%) scale(0.73);
  }

  40% {
    transform: translateX(-19%) scale(0.84);
  }

  50% {
    transform: translateX(-19%) scale(0.95);
  }

  60% {
    transform: translateX(-19%) scale(1.06);
  }

  70% {
    transform: translateX(-19%) scale(1.17);
  }

  80% {
    transform: translateX(-19%) scale(1.28);
  }

  90% {
    transform: translateX(-19%) scale(1.39);
  }

  100% {
    transform: translateX(-19%) scale(1.5);
  }
}

@keyframes warn3 {
  0% {
    transform: translateX(-19%) scale(0.5);
  }

  10% {
    transform: translateX(-19%) scale(0.63);
  }

  20% {
    transform: translateX(-19%) scale(0.76);
  }

  30% {
    transform: translateX(-19%) scale(0.89);
  }

  40% {
    transform: translateX(-19%) scale(1.02);
  }

  50% {
    transform: translateX(-19%) scale(1.15);
  }

  60% {
    transform: translateX(-19%) scale(1.28);
  }

  70% {
    transform: translateX(-19%) scale(1.41);
  }

  80% {
    transform: translateX(-19%) scale(1.54);
  }

  90% {
    transform: translateX(-19%) scale(1.67);
  }

  100% {
    transform: translateX(-19%) scale(1.8);
  }
}

.animation2 {
  >.dot {
    animation: warn3 3s ease-out infinite;
  }

  >.dot1 {
    animation: warn2 3s ease-out 0.5s infinite;
  }

  >.dot2 {
    animation: warn1 3s ease-out 1s infinite;
  }
}

.coordSvg {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  pointer-events: none;
  -webkit-mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
  mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
}

.logMarker {
  position: relative;

  >.dot {
    position: absolute;
    width: 50px;
    height: 32px;
    top: 35%;
    left: 0%;
    transform: translateX(-20%);
    z-index: -1;
    // border: 1px solid rgb(217, 54, 62);
    border-radius: 50%;
    pointer-events: none;
    // background: #d9363e52;
    // animation: warn1 3s ease-out infinite;
  }

  >.dot1 {
    position: absolute;
    width: 50px;
    height: 32px;
    top: 35%;
    left: 0%;
    transform: translateX(-20%);
    z-index: -1;
    pointer-events: none;
    // border: 1px solid #d9363e;
    border-radius: 50%;
    // background: #d9363e52;
    // animation: warn 3s ease-out 0.5s infinite;
  }

  >.dot2 {
    position: absolute;
    width: 50px;
    height: 32px;
    top: 35%;
    left: 0%;
    transform: translateX(-20%);
    z-index: -1;
    pointer-events: none;
    // border: 1px solid #d9363e;
    border-radius: 50%;
  }
}

.search {
  display: flex;
  align-items: center;
  position: absolute;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;

  .position {
    width: 36px;
    height: 36px;
    margin-left: 36px;
    cursor: pointer;
    background: url('../../assets/images/position.png') no-repeat center center;
    background-size: 30px 30px;
  }
}

.details {
  position: absolute;
  width: 300px;
  // height: 300px;
  right: 2%;
  bottom: 2%;
  z-index: 998;
  background: #fff;
  box-shadow: 0px 0px 12px #555;
  border-radius: 4px;
  padding: 10px 20px;

  >div {
    display: flex;
    line-height: 30px;

    .left {
      flex: 1;
    }

    .right {
      font-weight: bold;
      color: #000;
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

::v-deep .el-form-item {
  margin: 0;
}

::v-deep .el-form-item__label {
  color: #fff;
}

::v-deep .el-input__inner {
  border-radius: 0px;
}

::v-deep .amap-icon img {
  max-width: 2rem !important;
  max-height: 2rem !important;
}

.amap-box {
  height: 450px;
  //   height: 44vh;
  //   height: calc(100vh - 45px);
}

::v-deep .amap-labels {
  cursor: pointer;
}

// ::v-deep .amap-markers {
//   // pointer-events: none;
// }
.el-vue-search-box-container {
  // top: 45px;
  width: 100% !important;
}

.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}

.search-box .el-input {
  float: left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 7px 7px 0;
  outline: none;
  position: relative;
}

.search-box .el-button {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20%;
  background: #38a28a;
  border-radius: 0 7px 7px 0;
  border: none;
  color: #fff;
  outline: none;
}

.tip-box {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 35px;
  padding: 10px 0;
  background-color: #fff;
  opacity: 0.8;
}
</style>